<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
</head>
<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl shadow mb-5">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand  pr-5 text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse  row">
        <div class="offset-9 offset-sm-9 offset-xl-9">
            <ul class="navbar-nav  mt-2">
                <a class="nav-link mr-2" href="/index">主页</a>
                <a class="nav-item nav-link mx-2" href="/reset">忘记密码</a>
                <a class="nav-item nav-link ml-2" href="/login">已有账号</a>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-3">
    <!--    错误提示框-->
    <div class="alert alert-warning alert-dismissible fade show" role="alert" th:if="${error} != null">
        <strong>出问题啦！</strong>  <span th:text="${error}"> </span>
    </div>

    <div class="jumbotron jumbotron-fluid col-4 float-left bg-info show">
        <div class="container">
            <h1 class="display-4 text-light">现在注册</h1>
            <p class="lead text-light">加入到社区，分享您的点滴吧</p>
        </div>
    </div>

    <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7 float-right ml-4">
        <form  action="/register" method="post">
            <div class="input-group flex-nowrap mb-5">
                <div class="input-group-prepend ">
                    <span class="input-group-text">邮箱</span>
                </div>
                <input type="email" class="form-control" placeholder="邮箱" name="userId" th:value="${userId}">
            </div>

            <div class="input-group flex-nowrap my-5">
                <div class="input-group-prepend ">
                    <span class="input-group-text">密码</span>
                </div>
                <input type="password" class="form-control" placeholder="密码" name="password" th:value="${password}">
            </div>
            <div class="input-group flex-nowrap my-5">
                <div class="input-group-prepend ">
                    <span class="input-group-text">确认</span>
                </div>
                <input type="password" class="form-control" placeholder="确认密码" name="passwordRepeat" >
            </div>

            <div class="input-group flex-nowrap my-5">
                <input type="text" class="form-control" name="verificationCode" placeholder="验证码" autocomplete="off">
                <div class="input-group-append">
<!--                    点击按钮触发请求验证码-->
                    <input type="button" class="btn btn-primary" onclick="postEmailAddress();setTime(this)" value="获取验证码">
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-lg btn-block my-5">确认</button>
        </form>

    </div>
</div>


<!--脚注-->
<div>
    <footer class="text-center text-black-50">Copyright &copy; 2020, All Rights Reserved By shequ</footer>
    <footer class="text-center text-black-50">鄂ICP备123456号</footer>
</div>


<script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
<script type="text/javascript">
    // 用户输入
    const $userId = $("[name='userId']");

    // 上传验证码
    function postEmailAddress(){
        $.ajax({
            url:"/registerEmail",
            type:"post",
            data:{"emailAddress":$userId.val()}
        });
    }

    // 倒计时
    var countDown=60;
    function setTime(obj) {
        if (countDown == 0) {
            obj.removeAttribute("disabled");
            obj.value="获取验证码";
            countDown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value="重新发送(" + countDown + "s)";
            countDown--;
        }
        setTimeout(function() {
                settime(obj) }
            ,1000)
    }
</script>

</body>
</html>